<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>管理员列表</title>
<link rel="stylesheet" href= "../../css/pintuer.css"/>
<link rel="stylesheet" href="../../css/admin.css"/>
<link rel="stylesheet" href="../../bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="../../bootstrap/bootstrap-table.min.css">

<script src="../../js/jquery.js"></script>
<script src="../../js/tools.js"></script>
<script src="../../bootstrap/bootstrap.min.js"></script>
<script src="../../bootstrap/bootstrap-table.min.js"></script>
<script src="../../bootstrap/bootstrap-table-zh-CN.min.js"></script>
<script src="../../js/pintuer.js"></script>
<script src="../../js/page/jquery.twbsPagination.min.js"></script>
</head>
<body>
<form method="post" action="#" id="listform">
  <div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 内容列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
        <li> <a class="button border-main icon-plus-square-o" href="add.html"> 添加产品分类</a> </li>
        <li>
          <input type="text" placeholder="请输入分类名" name="keywords" id="name" class="input"/>
        </li>
        <li>
          <select id="status" class="input">
          	<option value="">全部</option>
          	<option value="1">上架</option>
          	<option value="2">下架</option>
          	<option value="3">删除</option>
          </select>
       </li>
       <li>
          <a href="javascript:void(0)" id="search" class="button border-main icon-search" > 搜索</a>
       </li>
      </ul>
    </div>
    <table id="table">
    </table>
    <span style="font-size:14px;">
       <div class="text-center">
           <ul id="pagination-demo" class="pagination-sm"></ul>
       </div>
   </span>
  </div>
</form>
<script type="text/javascript">
function loadTable(){
	// 首先销毁表格
	$('#table').bootstrapTable('destroy');
	//根据窗口调整表格高度
    $(window).resize(function() {
        $('#table').bootstrapTable('resetView', {
            height: tableHeight()
        })
    })
	// 初始化表格,动态从服务器加载数据
	$('#table').bootstrapTable({
		method:'post',
        contentType:'application/x-www-form-urlencoded',//必须要有！！！！
        url:host_url+'product-type/getPager',//要请求数据的文件路径
        toolbar: '#toolbar',//指定工具栏
        striped: true, //是否显示行间隔色
        //dataField:'res',//bootstrap table 可以前端分页也可以后端分页，这里
      	//我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
        pageNumber:1, //初始化加载第一页，默认第一页
        pagination:true,//是否分页
        queryParamsType:'limit',//查询参数组织方式
        //queryParams:queryParams,//请求服务器时所传的参数
        //得到查询的参数
        queryParams : function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var temp = {   
            	pageSize: params.limit,                         //页面大小
                pageNo: (params.offset / params.limit) + 1,   //页码
                name:$("#name").val(),
                status:$("#status").val()
            };
            return temp;
        },
        ajaxOptions:{
        	xhrFields: {withCredentials: true},
			crossDomain:true
        },
        sidePagination:'server',//指定服务器端分页
        pageSize:10,//单页记录数
        pageList:[5,10,20,30],//分页步进值
        showRefresh:true,//刷新按钮
        showColumns:true,
        clickToSelect:true,//是否启用点击选中行
        toolbarAlign:'right',//工具栏对齐方式
        buttonsAlign:'right',//按钮对齐方式
        toolbar:'#toolbar',//指定工作栏
	    columns:[
            {
                title:'序号',
                //field:'id',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return index+1;
                }
            },
            {
                title:'分类名',
                field:'name',
                align: 'center',
                valign: 'middle',
            },
            {
                title:'状态',
                field:'status',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    if(value == 1){
                    	return "上架";
                    }else if(value == 2){
                    	return "下架";
                    }else if(value == 3){
                    	return "删除";
                    }
                }
            },
            {
                title:'创建时间',
                field:'createTime',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                    return changeDateFormat(value)
                }
            },
            {
                title:'操作',
                field:'id',
                align: 'center',
                valign: 'middle',
                formatter: function (value, row, index) {
                	var result = "";                
                	result += "<a href='./edit.html?a=a&id="+value+"' title='编辑'>编辑</a>";
                	return result;
                }
            }
        ],
        locale:'zh-CN',//中文支持,
        responseHandler:function(res){
            //在ajax获取到数据，渲染表格之前，修改数据源
            return res;
        }
	});
	
}

$(function() {
    loadTable();
    //搜索按钮
    $("#search").click(function(){
    	loadTable();
    })
	
})
</script>
</body>
</html>